<template>
  <div class="tabbar-item" @click="btnclick">
      <div v-if="!isactive"><slot name="item-icon"></slot></div>
      <div v-else><slot name="item-icon-actvie"></slot></div>
      <div :style="coloractive"><slot name="item-text"></slot></div>
  </div>
</template>

<script>

export default {
    name:'tabbarItem',
    props: {
        path:{
            type:String
        },
        color:{
            type:String,
            default:'red'
        }
    },
    computed: {
      isactive(){
          return this.$route.path.search(this.path) != -1
      },
      coloractive(){
          return this.isactive ? {color:this.color} : {};
      } 
    },
  methods: {
    btnclick(){
     this.$router.push(this.path)
    }
  }
}
</script>

<style scoped> 
.tabbar-item{
    flex: 1;
    height: 49px;
    text-align: center;
    font-size: 14px;
    margin-bottom: 3px;
}
.tabbar-item img{
    height: 24px;
    width: 24px;
    vertical-align: middle;
    margin-top: 3px;
}
.active{
    font-size: red;
}
</style>